<template>
  <a-card>
    <template #title>
      <a-button type="primary" @click="addList" v-permiss="['add']">添加</a-button>
    </template>
    <a-table row-key="id" :columns="tableColumn" :pagination="pagination" :data-source="tableData">
      <template #operation="{record}">
        <a-button type="link" @click="editList(record)" v-permiss="['update']">修改</a-button>
      </template>
    </a-table>

    <a-modal v-model:visible="visible.isShow" :title="visible.title" @ok="confirm"
             :afterClose="clearForm"
             width="75%"
             :maskClosable="false">
      <div style="margin-bottom: 10px">
        <div style="margin-bottom: 15px">
          <span>年份</span> ：
          <a-date-picker
              mode="year"
              placeholder="请选择年份"
              format='YYYY'
              valueFormat="YYYY"
              v-model:value="form.quarterYear"
              :open='yearShowOne'
              :allowClear="false"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"
              style="width:220px"
          />
        </div>
        <div>
          <span>季度</span> ：
          <a-radio-group v-model:value="form.quarterNumber">
            <a-radio :value="1">第一季度</a-radio>
            <a-radio :value="4">第二季度</a-radio>
            <a-radio :value="7">第三季度</a-radio>
            <a-radio :value="10">第四季度</a-radio>
          </a-radio-group>
        </div>
      </div>
      <a-table row-key="value" :columns="addTableColumn" bordered :pagination="false" :data-source="addTableData">
        <template #title="{record}">
          <div v-html="record ?  record.title : ''"></div>
        </template>
        <template #value1="{record}">
          <a-input style="width:100%"  v-model:value="form[record.value1]"/>
        </template>
        <template #value2="{record}">
          <a-input style="width:100%" v-model:value="form[record.value2]"/>
        </template>
        <template #value3="{record}">
          <a-input style="width:100%" v-model:value="form[record.value3]"/>
        </template>
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
import {ref, onMounted, reactive, computed, toRefs, watch, h} from 'vue'
import {
  increaseProfitOperating,
  fetchProfitOperating,
  updateProfitOperating
} from '../../../api/finance'
import {message} from "ant-design-vue";
import {dateFormat} from '@/utils/index'
import deepcopy from 'deepcopy'

const tableColumn = [
  {title: '日期', dataIndex: 'quarterYear', width: 150, align: 'center', customRender: ({text}) => {

      return text.substr(0,4)
    }},
  {
    title: '季度', dataIndex: 'quarterNumber', width: 150, align: 'center', customRender: ({text}) => {
      const obj = {
        1: '第一季度',
        4: '第二季度',
        7: '第三季度',
        10: '第四季度'
      }
      return obj[text]
    }
  },
  {title: '更新时间', dataIndex: 'updateTime', width: 150, align: 'center'},
  {title: '操作', width: 100, align: 'center', slots: {customRender: 'operation',}},
]

const addTableData = [
  {
    oneTitle: '一、放款本金',
    twoTitle: '新增投入',
    threeTitle: '-',
    value1: 'quarter_number_1_loan_principal_new_investment',
    value2: 'quarter_number_2_loan_principal_new_investment',
    value3: 'quarter_number_3_loan_principal_new_investment'
  },
  {
    oneTitle: '-',
    twoTitle: '小计',
    threeTitle: '新增放款本金合计',
    value1: 'quarter_number_1_loan_principal_new_total',
    value2: 'quarter_number_2_loan_principal_new_total',
    value3: 'quarter_number_3_loan_principal_new_total'
  },

  {
    oneTitle: '二、主营业务成本',
    twoTitle: '支付费用',
    threeTitle: '放款手续费',
    value1: 'quarter_number_1_main_business_cost_loan_service_charge',
    value2: 'quarter_number_2_main_business_cost_loan_service_charge',
    value3: 'quarter_number_3_main_business_cost_loan_service_charge'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '支付费用',
    threeTitle: '回款手续费',
    value1: 'quarter_number_1_main_business_cost_charge_for_payment_collection',
    value2: 'quarter_number_2_main_business_cost_charge_for_payment_collection',
    value3: 'quarter_number_3_main_business_cost_charge_for_payment_collection'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '销账费用',
    threeTitle: '-',
    value1: 'quarter_number_1_main_business_cost_write_off_expenses',
    value2: 'quarter_number_2_main_business_cost_write_off_expenses',
    value3: 'quarter_number_3_main_business_cost_write_off_expenses'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '流量费用',
    threeTitle: '业务名单',
    value1: 'quarter_number_1_main_business_cost_business_list',
    value2: 'quarter_number_2_main_business_cost_business_list',
    value3: 'quarter_number_3_main_business_cost_business_list'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '短信费用',
    threeTitle: '通知/验证码短信',
    value1: 'quarter_number_1_main_business_cost_notification_verification_code_sms',
    value2: 'quarter_number_2_main_business_cost_notification_verification_code_sms',
    value3: 'quarter_number_3_main_business_cost_notification_verification_code_sms'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '短信费用',
    threeTitle: '营销短信',
    value1: 'quarter_number_1_main_business_cost_marketing_sms',
    value2: 'quarter_number_2_main_business_cost_marketing_sms',
    value3: 'quarter_number_3_main_business_cost_marketing_sms'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '电话费用',
    threeTitle: '营销语音',
    value1: 'quarter_number_1_main_business_cost_marketing_voice',
    value2: 'quarter_number_2_main_business_cost_marketing_voice',
    value3: 'quarter_number_3_main_business_cost_marketing_voice'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '电话费用',
    threeTitle: '语音电话',
    value1: 'quarter_number_1_main_business_cost_voice_phone',
    value2: 'quarter_number_2_main_business_cost_voice_phone',
    value3: 'quarter_number_3_main_business_cost_voice_phone'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '邮件费用',
    threeTitle: '营销邮件',
    value1: 'quarter_number_1_main_business_cost_marketing_email',
    value2: 'quarter_number_2_main_business_cost_marketing_email',
    value3: 'quarter_number_3_main_business_cost_marketing_email'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: 'AI费用',
    threeTitle: '智能催收',
    value1: 'quarter_number_1_main_business_cost_intelligent_collection',
    value2: 'quarter_number_2_main_business_cost_intelligent_collection',
    value3: 'quarter_number_3_main_business_cost_intelligent_collection'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '风控费用',
    threeTitle: '黑名单',
    value1: 'quarter_number_1_main_business_cost_cost_of_risk_control',
    value2: 'quarter_number_2_main_business_cost_cost_of_risk_control',
    value3: 'quarter_number_3_main_business_cost_cost_of_risk_control'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '风控费用',
    threeTitle: '风控评分',
    value1: 'quarter_number_1_main_business_cost_risk_control_score',
    value2: 'quarter_number_2_main_business_cost_risk_control_score',
    value3: 'quarter_number_3_main_business_cost_risk_control_score'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '风控费用',
    threeTitle: '用户注册费',
    value1: 'quarter_number_1_main_business_cost_user_registration_fee',
    value2: 'quarter_number_2_main_business_cost_user_registration_fee',
    value3: 'quarter_number_3_main_business_cost_user_registration_fee'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '风控费用',
    threeTitle: '银行卡校验费',
    value1: 'quarter_number_1_main_business_cost_bank_card_verification_fee',
    value2: 'quarter_number_2_main_business_cost_bank_card_verification_fee',
    value3: 'quarter_number_3_main_business_cost_bank_card_verification_fee'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '风控费用',
    threeTitle: '运营商费用',
    value1: 'quarter_number_1_main_business_cost_operator_fees',
    value2: 'quarter_number_2_main_business_cost_operator_fees',
    value3: 'quarter_number_3_main_business_cost_operator_fees'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '风控费用',
    threeTitle: '身份校验费',
    value1: 'quarter_number_1_main_business_cost_identity_verification_fee',
    value2: 'quarter_number_2_main_business_cost_identity_verification_fee',
    value3: 'quarter_number_3_main_business_cost_identity_verification_fee'
  },

  {
    oneTitle: '二、主营业务成本',
    twoTitle: 'APP费用',
    threeTitle: 'APK包',
    value1: 'quarter_number_1_main_business_cost_apk_package',
    value2: 'quarter_number_2_main_business_cost_apk_package',
    value3: 'quarter_number_3_main_business_cost_apk_package'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: 'APP费用',
    threeTitle: 'APP上架包',
    value1: 'quarter_number_1_main_business_cost_app_on_shelf_package',
    value2: 'quarter_number_2_main_business_cost_app_on_shelf_package',
    value3: 'quarter_number_3_main_business_cost_app_on_shelf_package'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: 'APP费用',
    threeTitle: 'APP维护费',
    value1: 'quarter_number_1_main_business_cost_app_maintenance_fee',
    value2: 'quarter_number_2_main_business_cost_app_maintenance_fee',
    value3: 'quarter_number_3_main_business_cost_app_maintenance_fee'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '投放费用',
    threeTitle: '代投',
    value1: 'quarter_number_1_main_business_cost_agent_investment',
    value2: 'quarter_number_2_main_business_cost_agent_investment',
    value3: 'quarter_number_3_main_business_cost_agent_investment'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '外包费用',
    threeTitle: '座席费',
    value1: 'quarter_number_1_main_business_cost_seat_fee',
    value2: 'quarter_number_2_main_business_cost_seat_fee',
    value3: 'quarter_number_3_main_business_cost_seat_fee'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '外包费用',
    threeTitle: '佣金',
    value1: 'quarter_number_1_main_business_cost_commission',
    value2: 'quarter_number_2_main_business_cost_commission',
    value3: 'quarter_number_3_main_business_cost_commission'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: 'SAAS服务费用',
    threeTitle: '打款服务',
    value1: 'quarter_number_1_main_business_cost_payment_service',
    value2: 'quarter_number_2_main_business_cost_payment_service',
    value3: 'quarter_number_3_main_business_cost_payment_service'
  },
  {
    oneTitle: '二、主营业务成本',
    twoTitle: '税金及附加',
    threeTitle: '-',
    value1: 'quarter_number_1_main_business_cost_taxes_and_surcharges',
    value2: 'quarter_number_2_main_business_cost_taxes_and_surcharges',
    value3: 'quarter_number_3_main_business_cost_taxes_and_surcharges'
  },
  {
    oneTitle: '-',
    twoTitle: '小计',
    threeTitle: '主营业务成本合计',
    value1: 'quarter_number_1_main_business_cost_cost_total',
    value2: 'quarter_number_2_main_business_cost_cost_total',
    value3: 'quarter_number_3_main_business_cost_cost_total'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '员工工资',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_employee_salary',
    value2: 'quarter_number_2_operating_expenses_employee_salary',
    value3: 'quarter_number_3_operating_expenses_employee_salary'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '员工奖金',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_employee_bonus',
    value2: 'quarter_number_2_operating_expenses_employee_bonus',
    value3: 'quarter_number_3_operating_expenses_employee_bonus'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '社保费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_social_security_fee',
    value2: 'quarter_number_2_operating_expenses_social_security_fee',
    value3: 'quarter_number_3_operating_expenses_social_security_fee'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '房租费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_rent',
    value2: 'quarter_number_2_operating_expenses_rent',
    value3: 'quarter_number_3_operating_expenses_rent'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '水电费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_water_and_electricity',
    value2: 'quarter_number_2_operating_expenses_water_and_electricity',
    value3: 'quarter_number_3_operating_expenses_water_and_electricity'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '物业管理费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_property_management_fee',
    value2: 'quarter_number_2_operating_expenses_property_management_fee',
    value3: 'quarter_number_3_operating_expenses_property_management_fee'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '办公费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_office_expenses',
    value2: 'quarter_number_2_operating_expenses_office_expenses',
    value3: 'quarter_number_3_operating_expenses_office_expenses'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '交通费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_traffic_expense',
    value2: 'quarter_number_2_operating_expenses_traffic_expense',
    value3: 'quarter_number_3_operating_expenses_traffic_expense'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '福利费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_welfare_funds',
    value2: 'quarter_number_2_operating_expenses_welfare_funds',
    value3: 'quarter_number_3_operating_expenses_welfare_funds'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '业务招待费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_business_entertainment_expenses',
    value2: 'quarter_number_2_operating_expenses_business_entertainment_expenses',
    value3: 'quarter_number_3_operating_expenses_business_entertainment_expenses'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '通讯费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_communication_fee',
    value2: 'quarter_number_2_operating_expenses_communication_fee',
    value3: 'quarter_number_3_operating_expenses_communication_fee'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '私卡代持费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_private_card_holding_fee',
    value2: 'quarter_number_2_operating_expenses_private_card_holding_fee',
    value3: 'quarter_number_3_operating_expenses_private_card_holding_fee'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '法人代持费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_legal_person_holding_fee',
    value2: 'quarter_number_2_operating_expenses_legal_person_holding_fee',
    value3: 'quarter_number_3_operating_expenses_legal_person_holding_fee'
  },
  {
    oneTitle: '三、营业费用',
    twoTitle: '项目服务费',
    threeTitle: '-',
    value1: 'quarter_number_1_operating_expenses_project_service_fee',
    value2: 'quarter_number_2_operating_expenses_project_service_fee',
    value3: 'quarter_number_3_operating_expenses_project_service_fee'
  },
  {
    oneTitle: '-',
    twoTitle: '小计',
    threeTitle: '营业费用合计',
    value1: 'quarter_number_1_operating_expenses_total',
    value2: 'quarter_number_2_operating_expenses_total',
    value3: 'quarter_number_3_operating_expenses_total'
  },

  {
    oneTitle: '四、管理费用',
    twoTitle: '管理工资',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_management_salary',
    value2: 'quarter_number_2_management_expenses_management_salary',
    value3: 'quarter_number_3_management_expenses_management_salary'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '管理奖金',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_management_bonus',
    value2: 'quarter_number_2_management_expenses_management_bonus',
    value3: 'quarter_number_3_management_expenses_management_bonus'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '社保费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_social_security_fee',
    value2: 'quarter_number_2_management_expenses_social_security_fee',
    value3: 'quarter_number_3_management_expenses_social_security_fee'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '办公费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_office_expenses',
    value2: 'quarter_number_2_management_expenses_office_expenses',
    value3: 'quarter_number_3_management_expenses_office_expenses'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '交通费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_traffic_expense',
    value2: 'quarter_number_2_management_expenses_traffic_expense',
    value3: 'quarter_number_3_management_expenses_traffic_expense'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '福利费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_welfare_funds',
    value2: 'quarter_number_2_management_expenses_welfare_funds',
    value3: 'quarter_number_3_management_expenses_welfare_funds'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '业务招待费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_business_entertainment_expenses',
    value2: 'quarter_number_2_management_expenses_business_entertainment_expenses',
    value3: 'quarter_number_3_management_expenses_business_entertainment_expenses'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '通讯费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_communication_fee',
    value2: 'quarter_number_2_management_expenses_communication_fee',
    value3: 'quarter_number_3_management_expenses_communication_fee'
  },
  {
    oneTitle: '四、管理费用',
    twoTitle: '租赁费',
    threeTitle: '-',
    value1: 'quarter_number_1_management_expenses_rental_fee',
    value2: 'quarter_number_2_management_expenses_rental_fee',
    value3: 'quarter_number_3_management_expenses_rental_fee'
  },
  {
    oneTitle: '-',
    twoTitle: '小计',
    threeTitle: '管理费用合计',
    value1: 'quarter_number_1_management_expenses_total',
    value2: 'quarter_number_2_management_expenses_total',
    value3: 'quarter_number_3_management_expenses_total'
  },

  {
    oneTitle: '五、财务费用',
    twoTitle: '手续费',
    threeTitle: '-',
    value1: 'quarter_number_1_financial_expenses_service_charge',
    value2: 'quarter_number_2_financial_expenses_service_charge',
    value3: 'quarter_number_3_financial_expenses_service_charge'
  },
  {
    oneTitle: '五、财务费用',
    twoTitle: '汇兑损益',
    threeTitle: '-',
    value1: 'quarter_number_1_financial_expenses_exchange_gains_and_losses',
    value2: 'quarter_number_2_financial_expenses_exchange_gains_and_losses',
    value3: 'quarter_number_3_financial_expenses_exchange_gains_and_losses'
  },
  {
    oneTitle: '五、财务费用',
    twoTitle: '利息支出',
    threeTitle: '-',
    value1: 'quarter_number_1_financial_expenses_interest_expense',
    value2: 'quarter_number_2_financial_expenses_interest_expense',
    value3: 'quarter_number_3_financial_expenses_interest_expense'
  },
  {
    oneTitle: '五、财务费用',
    twoTitle: '银行服务费',
    threeTitle: '-',
    value1: 'quarter_number_1_financial_expenses_bank_service_charge',
    value2: 'quarter_number_2_financial_expenses_bank_service_charge',
    value3: 'quarter_number_3_financial_expenses_bank_service_charge'
  },
  {
    oneTitle: '-',
    twoTitle: '小计',
    threeTitle: '财务费用合计',
    value1: 'quarter_number_1_financial_expenses_total',
    value2: 'quarter_number_2_financial_expenses_total',
    value3: 'quarter_number_3_financial_expenses_total'
  },


  {
    oneTitle: '本月资金预算合计',
    value1: 'quarter_number_1_total_budget_of_this_month',
    value2: 'quarter_number_2_total_budget_of_this_month',
    value3: 'quarter_number_3_total_budget_of_this_month'
  },
  {oneTitle: '本季度资金预算合计', value1: 'total_budget_of_this_quarter',},
]
console.log(addTableData)
let addTableColumn = [
  {
    title: '一级科目名称', dataIndex: 'oneTitle', align: 'center', customRender: ({text, index}) => {
      const renderObj = {
        children: text,
        props: {},
      }
      if (text === '二、主营业务成本') {
        renderObj.props.rowSpan = index === 2 ? 24 : 0
      } else if (text === '三、营业费用') {
        renderObj.props.rowSpan = index === 27 ? 14 : 0
      } else if (text === '四、管理费用') {
        renderObj.props.rowSpan = index === 42 ? 9 : 0
      } else if (text === '五、财务费用') {
        renderObj.props.rowSpan = index === 52 ? 4 : 0
      } else if (text === '-' || text === '小计') {
        renderObj.props.rowSpan = 1
      } else if (text === '本月资金预算合计' || text === '本季度资金预算合计') {
        renderObj.props.colSpan = 3
      }
      return renderObj
    }, width: 150
  },
  {
    title: '二级科目名称', dataIndex: 'twoTitle', align: 'center', customRender: ({text, index}) => {
      const renderObj = {
        children: text,
        props: {},
      }
      if (text === '支付费用') {
        renderObj.props.rowSpan = index === 2 ? 2 : 0
      } else if (text === '短信费用') {
        renderObj.props.rowSpan = index === 6 ? 2 : 0
      } else if (text === '电话费用') {
        renderObj.props.rowSpan = index === 8 ? 2 : 0
      } else if (text === '风控费用') {
        renderObj.props.rowSpan = index === 12 ? 6 : 0
      } else if (text === 'APP费用') {
        renderObj.props.rowSpan = index === 18 ? 3 : 0
      } else if (text === '外包费用') {
        renderObj.props.rowSpan = index === 22 ? 2 : 0
      } else if (index === 57 || index === 58) {
        renderObj.props.rowSpan = 0
      }
      return renderObj
    }, width: 150
  },
  {
    title: '三级科目名称', dataIndex: 'threeTitle', align: 'center', width: 150, customRender: ({text, index}) => {
      const renderObj = {
        children: text,
        props: {},
      }
      if (index === 57 || index === 58) {
        renderObj.props.rowSpan = 0
      }
      return renderObj
    }
  },
  {
    title: '月份', dataIndex: 'value1', align: 'center', width: 150, render: true, slots: {customRender: 'value1',}
  },
  {
    title: '月份', dataIndex: 'value2', align: 'center', width: 150, render: true, slots: {customRender: 'value2',}
  },
  {
    title: '月份', dataIndex: 'value3', align: 'center', width: 150, render: true, slots: {customRender: 'value3',}
  },
]


export default {
  name: "QuarterlyOperationManage ",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      form: {
        quarterYear: dateFormat(new Date(), 'YYYY'),
        quarterNumber: 1
      },
      yearShowOne: false
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + '条',
      onChange: (page) => {
        state.page.pageNum = page
        getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        getTableData()
      }
    }))

    watch(() => state.form.quarterNumber, (value) => {
      setTableColumns(value)
    })

    // 动态更改表头
    function setTableColumns(value) {
      addTableColumn = addTableColumn.map(item => {
        if (item.render) {
          if (item.dataIndex === 'value1') {
            item.title = value + '月份'
          }
          if (item.dataIndex === 'value2') {
            item.title = (value + 1) + '月份'
          }
          if (item.dataIndex === 'value3') {
            item.title = (value + 2) + '月份'
          }
        }
        return item
      })
    }

    async function getTableData() {
      const businessId = sessionStorage.getItem('businessValue')
      if (!businessId) return message.error('请选择事业部')
      const res = await fetchProfitOperating({
        ...state.page,
        businessId: parseInt(businessId)
      })
      if (res.code === 200) {
        const {list, total} = res.data
        state.tableData = list
        state.page.total = total
      }
    }

    // 弹出日历和关闭日历的回调
    function openChangeOne(status) {
      if (status) {
        state.yearShowOne = true
      }
    }

    // 得到年份选择器的值
    function panelChangeOne(value) {
      state.form.quarterYear = value;
      state.yearShowOne = false;
    }

    function addList() {
      state.visible = {
        isShow: true,
        type: 'add',
        title: '添加'
      }
    }

    function editList(record) {
      const obj  = {
        id:record.id,
        businessId:record.businessId,
        quarterYear:record.quarterYear.substr(0,4),
        quarterNumber:record.quarterNumber
      }
      if (record.content) {
        const content = JSON.parse(record.content)
        for (const key in content) {
          obj[key] = content[key]
        }
      }
      state.form = obj
      console.log(obj)
      state.visible = {
        isShow: true,
        type: 'update',
        title: '修改'
      }
    }

    function clearForm() {
      state.form = {
        quarterYear: dateFormat(new Date(), 'YYYY'),
        quarterNumber: 1
      }
    }

    async function confirm() {
      const params = {
        businessId: parseInt(sessionStorage.getItem('businessValue')),
        id: state.form.id,
        quarterNumber: state.form.quarterNumber,
        quarterYear: state.form.quarterYear,
      }
      const valueObj = deepcopy(state.form)
      delete valueObj.quarterNumber
      delete valueObj.quarterYear
      for (const key in valueObj) {
        if (valueObj[key] !== null && typeof valueObj[key] !== undefined) {
          valueObj[key] = valueObj[key].toString()
        }
      }
      params['content'] = JSON.stringify(valueObj)
      const isAdd = state.visible.type === 'add'
      const api = (params) => isAdd ? increaseProfitOperating(params) : updateProfitOperating(params)
      const res = await api(params)
      if (res.code === 200) {
        message.success(isAdd ? '添加成功' : '修改成功')
        getTableData()
        state.visible.isShow = false
      }
    }

    onMounted(() => {
      getTableData()
      setTableColumns(state.form.quarterNumber)
    })
    return {
      addTableData,
      openChangeOne,
      panelChangeOne,
      addTableColumn,
      pagination,
      tableColumn,
      clearForm,
      confirm,
      addList,
      editList,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
